<template>
  <div class="login-body">
    <div class="login-div">
      <div class="login-content">
        <h1 class="login-title">欢迎使用</h1>
        <el-form ref="loginForm" :model="loginForm" label-width="70px" :rules="rules" :hide-required-asterisk="true">
          <el-form-item label="用户名" prop="uname">
            <el-input v-model="loginForm.uname" placeholder="请输入您的学号或工号" prefix-icon="el-icon-user">
            </el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="loginForm.password" 
              auto-complete="off" placeholder="初始密码为111111" 
              prefix-icon="el-icon-lock">
            </el-input>
          </el-form-item>
          <el-form-item label="用户身份">
            <el-radio-group class="login-identity" v-model="loginForm.identity">
              <el-radio label="学生"></el-radio>
              <el-radio label="教师"></el-radio>
              <el-radio label="管理员"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item class="login-button">
            <el-button type="primary" @click.prevent="onSubmit">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import {login} from '@/api/user'
export default {
  name:'login',
  data(){
    return {
      loginForm:{
        uname:'',
        password:'',
        identity:'学生'
      },
      rules:{
        uname:[
          {required:true,message:'用户名不能为空',trigger:'blur'},
          {pattern:/^\d+$/,message:'用户名不能包含字母及其他字符',trigger:'blur'}
        ],
        password:[
          {required:true,message:'密码不能为空',trigger:'blur'},
          {pattern:/^\S{6,20}$/,message:'密码长度为6-20个字符',trigger:'blur'}
        ]
      }
    }
  },
  methods:{
    onSubmit(){
      this.$refs.loginForm.validate((valid)=>{
        if(valid){
          const user={id:this.loginForm.uname,password:this.loginForm.password,status:this.loginForm.identity}
          login(user).then(res=>{
            if(res.data.status===0){
              this.$store.commit('SET_TOKEN',res.data.token)
              this.$store.commit('SET_IDENTITY',this.loginForm.identity)
              this.$router.push('/mainPage')
            }else{
              alert('用户名或密码错误！')
              this.$refs.loginForm.resetFields()
            }
          })
        }else{
          console.log('校验失败');
          this.$refs.loginForm.resetFields()
          return false
        }
      })
    }
  }

}
</script>

<style scoped>
.login-body{
  position: relative;
  width: 100%;
  height: 738px;
  background: url(../assets/background.jpg) no-repeat top center;
  background-size: auto 738px;
  font-size: 16px;
  font-weight: 600;
}
.login-div{
  position: absolute;
  width: 450px;
  height: 330px;
  top:50%;
  left: 50%;
  translate: -50% -50%;
  background-color: #fff;
  border-radius: 10px;
}
.login-content{
  position: absolute;
  width: 400px;
  height: 250px;
  top:50%;
  left: 50%;
  translate: -50% -50%;
  padding-bottom: 0;
}
.login-title{
  text-align: center;
  margin:8px 0;
}
.login-identity{
  margin-left: 30px;
}
.login-button{
  border-radius: 8px;
  padding-left: 90px;
  margin-top:-10px;
}
</style>